<template>
  <div class='first'>
    <div class="head">
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index2.png"></div>
          <div class="item_r">
            <div>今日缴费次数</div>
            <div class="color_b">{{titleInfo.todayPayNum}}</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index3.png"></div>
          <div class="item_r">
            <div>今日缴费金额</div>
            <div class="color_b">¥{{titleInfo.todayPayAmount | currency('')}}</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index4.png" class="tip_img"></div>
          <div class="item_r">
            <div>累计收费金额</div>
            <div class="color_b">¥{{titleInfo.totalPayAmount | currency('')}}</div>
          </div>
        </div>
      </div>
    </div>
    <!--echart 组件-->
    <div :styles="styles" v-if="!isEchart"></div>
    <echarts :option="option" :styles="styles" v-if="isEchart"></echarts>
    <div class="footer">
      <div class="footer_title">系统快捷入口</div>
      <div class="footer_content">
        <div class="footer_item" @click="goPage(2)">
          <img src="../../../assets/img/footer1.jpg">
          <div>添加缴费项目</div>
        </div>
        <div class="footer_item" @click="goPage(4)">
          <img src="../../../assets/img/footer3.jpg">
          <div>管理缴费人</div>
        </div>
        <div class="footer_item" @click="goPage(5)">
          <img src="../../../assets/img/footer4.jpg">
          <div>查看收款账户</div>
        </div>
        <div class="footer_item" @click="goPage(6)">
          <img src="../../../assets/img/footer5.jpg">
          <div>更改密码</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getPayInfo, getNearPay } from 'api/social/first/index'
  import { timeFormat } from 'src/filter/index'
  import Echarts from 'src/components/common/echarts'
  export default {
    data () {
      return {
        activeName: '',
        isEchart: false,
        styles: {
          height: '500px',
          width: '90%'
        }, // echart 样式
        option: {
          title: {
            // text: 'ECharts 入门示例'
          },
          toolbox: {
            show: false,
            feature: {
              magicType: { show: false, type: ['stack', 'tiled'] },
              saveAsImage: { show: false }
            }
          },
          tooltip: { trigger: 'axis' },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 4, 6, 7]
          },
          yAxis: {},
          series: {
            name: '缴费金额',
            type: 'line',
            smooth: true,
            data: [0, 10, 20, 60, 0, 0]
          }
        },
        titleInfo: {}, // 学校信息
        content: {} // tab每项具体信息
      }
    },
    components: {
      echarts: Echarts
    },
    created () {
      getPayInfo().then(res => {
        this.titleInfo = res.data
      })
    },
    mounted () {
      // 获取趋势图信息
      this.fetchTradeData().then(() => {
        this.isEchart = true
      })
    },
    destroyed () {
    },
    methods: {
      fetchTradeData () {
        return new Promise((resolve, reject) => {
          getNearPay().then(res => {
            let temx, temy
            temy = res.data.map((val, index) => {
              return val.payAmount
            })
            temx = res.data.map((val, index) => {
              return timeFormat(val.time, 'yyyy/MM/dd')
            })
            this.option.xAxis.data = temx
            this.option.series.data = temy
            resolve()
          })
        })
      },
      goPage (index) {
        switch (index) {
          case 1:
            this.$router.push({ name: 'payManage' })
            break
          case 2:
            this.$router.push({ name: 'add' })
            break
          case 3:
            this.$router.push({ name: 'payManage' })
            break
          case 4:
            this.$router.push({ name: 'payManage' })
            break
          case 5:
            this.$router.push({ name: 'basicSet' })
            break
          case 6:
            this.$router.push({ name: 'changePassword' })
            break
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .first {
    .color_r {
      color: red;
    }
    .color_b {
      color: #20a0ff;
      font-size: 20px;
    }
    padding: 20px;
    .head {
      padding: 20px;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .item {
        margin-right: 20px;
        .item_inner {
          height: 100px;
          width: 250px;
          padding-left: 20px;
          border: 1px solid rgb(228, 228, 228);
          border-radius: 5px;
          display: flex;
          align-items: center;
          .item_l {
            width: 60px;
            img {
              width: 50px;
              height: 50px;
            }
            .tip_img {
              width: 60px;
              height: 60px;
            }
          }
          .item_r {
            height: 60px;
            padding-left: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
    }
    .no_tabinfo {
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #999;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;
    }
    .content_outer {
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;
    }
    .content {
      padding: 20px 20px 0 20px;
      .content_item {
        display: flex;
        .cotent_item_one {
          flex: 1;
          margin-right: 40px;
          display: flex;
          border-bottom: 1px solid rgb(228, 228, 228);
          justify-content: space-between;
          line-height: 3;
        }
        .cotent_item_one:last-of-type {
          margin: 0;
        }
      }
      .content_tip {
        text-align: right;
        line-height: 4;
        color: #20a0ff;
        span {
          cursor: pointer;
        }
      }
    }
    .footer {
      margin-top: 20px;
      height: 200px;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;
      .footer_title {
        color: #20a0ff;
        height: 50px;
        padding-left: 30px;
        line-height: 50px;
        border-bottom: 1px solid rgb(228, 228, 228);
      }
      .footer_content {
        display: flex;
        align-items: center;
        padding: 30px;
        .footer_item {
          cursor: pointer;
          width: 150px;
          text-align: center;
          img {
            width: 75px;
            height: 75px;
          }
          &:hover {
            color: #20a0ff;
          }
        }
      }
    }
  }
</style>